<template>
    <div class="app-container">
      <el-row :gutter="20">
      <splitpanes :horizontal="this.$store.getters.device === 'mobile'" class="default-theme">
        <pane size="16">
            <el-col>
              <div class="head-container">
                <el-input v-model="deptName" placeholder="请输入材料" clearable size="small" prefix-icon="el-icon-search" style="margin-bottom: 20px" />
              </div>
              <div class="head-container">
                <el-tree :data="parentAccountName" :props="defaultProps" auto-expand-parent default-expand-all :expand-on-click-node="true"
              :filter-node-method="filterNode" ref="tree" highlight-current @node-click="handleNodeClick" />
              </div>
            </el-col>
          </pane>
          <pane size="84">
            <el-col>
              <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
                 <el-form-item label="编号" prop="编号">
                   <el-input v-model="queryParams.编号" placeholder="请输入编号" clearable @keyup.enter.native="handleQuery" />
                 </el-form-item>
                 <el-form-item label="品名" prop="品名">
                   <el-input v-model="queryParams.品名" placeholder="请输入品名" clearable @keyup.enter.native="handleQuery" />
                 </el-form-item>
                 <el-form-item label="类别" prop="类别">
                   <el-input v-model="queryParams.类别" placeholder="请输入类别" clearable @keyup.enter.native="handleQuery" />
                 </el-form-item>
  
                 <el-form-item>
                   <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                   <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                 </el-form-item>
              </el-form>
              
              <el-row :gutter="10" class="mb8">
                <!-- <el-col :span="1.5">
                  <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
                </el-col> -->
               <!--  <el-col :span="1.5">
                  <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single"
                    @click="handleUpdate">修改</el-button>
                </el-col> -->
                <!-- <el-col :span="1.5">
                  <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
                    @click="handleDelete">删除</el-button>
                </el-col> -->
                <el-col :span="1.5">
                  <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
                </el-col>
                <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
              </el-row>
              
            <el-table :data="tableData" border v-loading="loading" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column prop="物品代号" align="center" label="物品代号" />
            <el-table-column prop="物品名称" align="center" label="物品名称" />
            <el-table-column prop="物品规格" align="center" label="物品规格" />
            <el-table-column prop="物品单位" align="center" label="物品单位" />
            <el-table-column prop="装箱数" align="center" label="装箱数" />
            <el-table-column prop="库存数量" align="center" label="库存数量" />
            <!-- 辅料档案  -->
            <div v-if="isShow1">
              <el-table-column prop="包装数" align="center" label="包装数" />
              <el-table-column prop="来源" align="center" label="来源(自制、采购)" />
            </div>
            <!-- 半成品档案 -->
            <div v-if="isShow2">
              <el-table-column prop="颜色" align="center" label=" 颜色" />
              <el-table-column prop="仓库" align="center" label="仓库" />
              <el-table-column prop="模具数量" align="center" label="模具数量" />
              <el-table-column prop="来源" align="center" label="来源(自制、采购)" />
              <el-table-column prop="发料方式" align="center" label="发料方式(按单发料、批量发料)" />
            </div>
            <!-- 成品档案 -->
            <div v-if="isShow3">
              <el-table-column prop="英文名称" align="center" label=" 英文名称" />
              <el-table-column prop="客户货号" align="center" label="客户货号" />
              <el-table-column prop="仓库" align="center" label="仓库(成品仓库)" />
              <el-table-column prop="属性" align="center" label="属性(成品)" />
              <el-table-column prop="类别" align="center" label="类别(成品类)" />
              <el-table-column prop="装箱数" align="center" label="装箱数" />
              <el-table-column prop="颜色" align="center" label=" 颜色" />
              <el-table-column prop="来源" align="center" label="来源(自制、采购)" />
            </div>
            <!-- 其他档案 -->
            <div v-if="isShow4">
              <el-table-column prop="来源" align="center" label="来源(自制、采购)" />
            </div>
            <!-- 设备档案 -->
            <div v-if="isShow5">
              <el-table-column prop="设备编号" align="center" label="设备编号" />
              <el-table-column prop="设备名称" align="center" label="设备名称" />
              <el-table-column prop="规格型号" align="center" label="规格型号" />
              <el-table-column prop="设备种类" align="center" label="设备种类(注塑类、密胺类、模具类、工程类及其他们的子类)" />
              <el-table-column prop="制造厂商" align="center" label="制造厂商" />
              <el-table-column prop="出厂编号" align="center" label="出厂编号" />
              <el-table-column prop="出厂日期" align="center" label="出厂日期" />
              <el-table-column prop="启用日期" align="center" label="启用日期" />
            </div>
            <!-- 模具档案 -->
            <div v-if="isShow6">
              <el-table-column prop="模具编号" align="center" label="模具编号" />
              <el-table-column prop="模具名称" align="center" label="模具名称" />
              <el-table-column prop="单位" align="center" label="单位" />
              <el-table-column prop="类别" align="center" label="类别" />
              <el-table-column prop="来源" align="center" label="来源(自制、采购)" />
              <el-table-column prop="胶口料" align="center" label="胶口料" />
              <el-table-column prop="重量" align="center" label="重量" />
              <el-table-column prop="出模数" align="center" label="出模数" />
              <el-table-column prop="成型周期" align="center" label="成型周期" />
              <el-table-column prop="材质" align="center" label="材质" />
              <el-table-column prop="注逆单价/小时" align="center" label="注逆单价/小时" />
              <el-table-column prop="底标规格" align="center" label="底标规格" />
            </div>
            <el-table-column label="操作" align="center" width="150px" fixed="right">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
              <!-- <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button> -->
            </template>
          </el-table-column>
          </el-table>
          
          <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
            @pagination="getList" />
              
            </el-col>
          </pane>
        </splitpanes>
      </el-row>
      
      <!-- 产品列表 -->
            <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
              <el-form ref="form" :model="form" :rules="rules" label-width="100px">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="物品代号" prop="物品代号">
                      <el-input v-model="form.物品代号" placeholder="请输入物品代号" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="物品名称" prop="物品名称">
                      <el-input v-model="form.物品名称" placeholder="请输入物品名称" :disabled="isEdit" />
                    </el-form-item>
                  </el-col>
                </el-row>
                
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="物品规格" prop="物品规格">
                      <el-input v-model="form.物品规格" placeholder="请输入物品规格" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="物品单位" prop="物品单位">
                      <el-input v-model="form.物品单位" placeholder="请输入物品单位" />
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="装箱数" prop="装箱数">
                            <el-input v-model="form.装箱数" placeholder="请输入装箱数"></el-input>
                        </el-form-item>
                    </el-col>
                  <el-col :span="12">
                    <el-form-item label="库存数量" prop="库存数量">
                      <el-input v-model="form.库存数量" placeholder="请输入库存数量" />
                    </el-form-item>
                  </el-col>
                </el-row>
                
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
              </div>
            </el-dialog>
    </div>
  </template>
  
  <script>
  import ImageUpload from '@/components/ImageUpload';
  import { Splitpanes, Pane } from "splitpanes";
  import "splitpanes/dist/splitpanes.css";
  export default {
    components: { Splitpanes, Pane },
    data() {
      return {
        // 标题
        title:null,
        // 总条数
        total:0,
        // 打开弹出框
        open:false,
        // 表格
        form:{},
        // 校验
        rules:{},
        
        importType:'',
        
        parentAccountName: [{
          label: '物料类别',
          children: [{
            label: '原材料',
            children: [{
              label: '塑胶',
              children: [{
                label: '塑胶原料',
                children: [{
                  label: '塑胶新料'
                }]
              }, {
                label: '色粉',
              },]
            }, {
              label: '密胺',
              children: [{
                label: 'A1料'
              }, {
                label: 'A3料'
              }, {
                label: 'A5料'
              }, {
                label: '光粉'
              }, {
                label: '竹木粉'
              },
              ]
            },{
              label: '花纸'
            }]
          }, {
            label: '辅料类',
            children:[{
              label:'纸箱',
            },{
              label:'条码',
            },{
              label:'胶袋',
              children:[{
                label:'OPP袋'
              },{
                label:'PE袋'
              }]
            },{
              label:'说明书'
            },{
              label:'彩标'
            },{
              label:'白纸'
            }]
          }, {
            label: '半成品类',
            children:[{
              label:'塑胶半成品类',
            },{
              label:'密胺半成品类',
            }]
          },
          {
            label: '成品类',
            children:[{
              label:'塑胶成品类',
            },{
              label:'密胺成品类',
            }]
          },
          {
            label: '其他类',
            children:[{
              label:'办公用品'
            },{
              label:'五金'
            },{
              label:'五金/辅料'
            },{
              label:'工程用具'
            },{
              label:'研磨'
            },{
              label:'食堂'
            }]
          },
          {
            label: '设备类',
            children:[{
              label:'注塑类'
            },{
              label:'密胺类'
            },{
              label:'模具类'
            },{
              label:'工程类'
            }]
          },
          {
            label: '模具类',
            children:[{
              label:'塑胶类模具'
            },{
              label:'密胺类模具'
            }]
          },{
            label: '底标类',
            children:[{
              label:'底标'
            }]
          },]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        queryParams: {
          pageNum: 1,
          pageSize: 10,
        },
        showSearch: true,
        single: false,
        multiple: false,
        tableData: [],
        tableData1: [{
          label: '原材料',
          children: [{
            物品代号: '橡胶料',
            物品名称: '橡胶料',
            物品规格: '76653',
            物品单位: '公斤',
            装箱数: '',
            库存数量: '0',
          }, {
            物品代号: 'PPHY',
            物品名称: '聚丙烯',
            物品规格: 'PPHY16',
            物品单位: '公斤',
            装箱数: '',
            库存数量: '1500',
          }, {
            物品代号: 'PS透明',
            物品名称: 'PS透明',
            物品规格: '汕头透笨',
            物品单位: '公斤',
            装箱数: '',
            库存数量: '18531.69',
          }]
        }, {
          label: '辅料类',
          children: [{
            编号: '02032896',
            代号: 'HZ-A101',
            品名: 'BF325085胶带',
            类别: '辅料',
            主单位: '个',
            副单位: '米',
            转换率: '1:1',
            货位: 'A1',
            是否需要货位: '是',
            ABC编码: 'A101',
            批号: '20210101',
            条形码: '123456789012',
            来源: '自制',
            是否管制: '否',
            重量单位: '克',
            单位重量: '1000',
            体积单位: '立方米',
            单位体积: '1',
            保质天数: '30',
            安全库存: '1000',
            最小库存: '0',
            最大库存: '100000',
            最少库存金额: '0',
            最大库存金额: '100000000',
            税率: '0.13',
            采购方式: '按单采购',
            采购提前期: '1',
            生产提前期: '1',
            价格: '100',
            状态: '正在使用',
            包装数: '1000',
            // 来源: '自制',
          }, {
            编号: '02032897',
            代号: 'HZ-A102',
            品名: 'BF325086胶带',
            类别: '辅料',
            主单位: '个',
            副单位: '米',
            转换率: '1:1',
            货位: 'A1',
            是否需要货位: '是',
            ABC编码: 'A101',
            批号: '20210101',
            条形码: '123456789012',
            来源: '自制',
            是否管制: '否',
            重量单位: '克',
            单位重量: '1000',
            体积单位: '立方米',
            单位体积: '1',
            保质天数: '30',
            安全库存: '1000',
            最小库存: '0',
            最大库存: '100000',
            最少库存金额: '0',
            最大库存金额: '100000000',
            税率: '0.13',
            采购方式: '按单采购',
            采购提前期: '1',
            生产提前期: '1',
            价格: '100',
            状态: '正在使用',
            包装数: '1000',
          }, {
            编号: '02032898',
            代号: 'HZ-A103',
            品名: 'BF325087胶带',
            类别: '辅料',
            主单位: '个',
            副单位: '米',
            转换率: '1:1',
            货位: 'A1',
            是否需要货位: '是',
            ABC编码: 'A101',
            批号: '20210101',
            条形码: '123456789012',
            来源: '自制',
            是否管制: '否',
            重量单位: '克',
            单位重量: '1000',
            体积单位: '立方米',
            单位体积: '1',
            保质天数: '30',
            安全库存: '1000',
            最小库存: '0',
            最大库存: '100000',
            最少库存金额: '0',
            最大库存金额: '100000000',
            税率: '0.13',
            采购方式: '按单采购',
            采购提前期: '1',
            生产提前期: '1',
            价格: '100',
            状态: '正在使用',
            包装数: '1000',
          }]
        }, {
          label: '半成品类',
          children: [{
            编号: '03032896',
            代号: 'HZ-A101',
            品名: '汤碗',
            类别: '半成品',
            主单位: '个',
            副单位: '米',
            转换率: '1:1',
            货位: 'A1',
            是否需要货位: '是',
            ABC编码: 'A101',
            批号: '20210101',
            条形码: '123456789012',
            来源: '自制',
            是否管制: '否',
            重量单位: '克',
            单位重量: '1000',
            体积单位: '立方米',
            单位体积: '1',
            保质天数: '30',
            安全库存: '1000',
            最小库存: '0',
            最大库存: '100000',
            最少库存金额: '0',
            最大库存金额: '100000000',
            税率: '0.13',
            采购方式: '按单采购',
            采购提前期: '1',
            生产提前期: '1',
            价格: '100',
            状态: '正在使用',
            包装数: '1000',
            // 来源: '自制',
          }, {
            编号: '03032897',
            代号: 'HZ-A102',
            品名: '汤碗',
            类别: '半成品',
            主单位: '个',
            副单位: '米',
            转换率: '1:1',
            货位: 'A1',
            是否需要货位: '是',
            ABC编码: 'A101',
            批号: '20210101',
            条形码: '123456789012',
            来源: '自制',
            是否管制: '否',
            重量单位: '克',
            单位重量: '1000',
            体积单位: '立方米',
            单位体积: '1',
            保质天数: '30',
            安全库存: '1000',
            最小库存: '0',
            最大库存: '100000',
            最少库存金额: '0',
            最大库存金额: '100000000',
            税率: '0.13',
            采购方式: '按单采购',
            采购提前期: '1',
            生产提前期: '1',
            价格: '100',
            状态: '正在使用',
            包装数: '1000',
          }]
        },
        {
          label: '成品类'
        },
        {
          label: '其他类'
        },
        {
          label: '设备类'
        },
        {
          label: '模具类'
        }],
        loading: false,
        ids: [],
        isShow1: false,
        isShow2: false,
        isShow3: false,
        isShow4: false,
        isShow5: false,
        isShow6: false,
        
        // 记录修改的索引
        index:0,
        
        // 一键生成
        titleReference: "一键生成物品",
        openReference: false,
        formReference: {},
      }
    },
    mounted() {
      this.handleNodeClick(this.parentAccountName[0].children[0])
    },
    
    methods: {
      
      handleAddSemiFinished(){
        this.title = '新增半成品'
        this.form.类别 = '半成品'
        this.form.品名 = '汤碗'
        this.open = true;
        this.isEdit = true;
      },
      
      handleAddFinished(){
        this.titleReference = "一键生成物品"
        this.openReference = true;
      },
      
      handleAddAccessory(){
        this.title = '新增模具'
        this.form.类别 = '模具'
        this.form.品名 = '模型'
        this.open = true;
        this.isEdit = true;
      },
      
      handleAddPatterned(){
        this.title = '新增原材料'
        this.form.类别 = '原材料'
        this.form.品名 = '花纸'
        this.open = true;
        this.isEdit = true;
      },
      
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      handleNodeClick(data) {
        if (data.label === '原材料') {
          this.tableData = this.tableData1[0].children;
          this.isShow1 = false;
          this.isShow2 = false;
          this.isShow3 = false;
          this.isShow4 = false;
          this.isShow5 = false;
          this.isShow6 = false;
        } 
        else if(data.label === "花纸"){
          /* this.$alert("此分类下不建档", "提示", {
            confirmButtonText: '关闭',
          }) */
        }
        else if (data.label === '辅料类') {
          this.tableData = this.tableData1[1].children;
          this.isShow1 = false;
          this.isShow2 = false;
          this.isShow3 = false;
          this.isShow4 = true;
          this.isShow5 = false;
          this.isShow6 = false;
         /*  this.$alert("此分类下不建档", "提示", {
            confirmButtonText: '关闭',
          }) */
        } else if(data.label === "纸箱"){
          /* this.$alert("此分类下不建档", "提示", {
            confirmButtonText: '关闭',
          }) */
        } else if (data.label === '条码') {
          /* this.$alert("此分类下不建档", "提示", {
            confirmButtonText: '关闭',
          }) */
        } else if(data.label === "胶袋"){
          /* this.$alert("此分类下不建档", "提示", {
            confirmButtonText: '关闭',
          }) */
        }
        else if (data.label === '说明书') {
          /* this.$alert("此分类下不建档", "提示", {
            confirmButtonText: '关闭',
          }) */
        } else if (data.label === '彩标') {
         /*  this.$alert("此分类下不建档", "提示", {
            confirmButtonText: '关闭',
          }) */
        } else if (data.label === '白纸') {
          /* this.$alert("此分类下不建档", "提示", {
            confirmButtonText: '关闭',
          }) */
        }
        else if (data.label === '半成品类') {
          this.tableData = this.tableData1[2].children;
          this.isShow1 = false;
          this.isShow2 = true;
          this.isShow3 = false;
          this.isShow4 = false;
          this.isShow5 = false;
          this.isShow6 = false;
        } else if (data.label === '成品类') {
          this.tableData = this.tableData1[3].children;
          this.isShow1 = false;
          this.isShow2 = false;
          this.isShow3 = true;
          this.isShow4 = false;
          this.isShow5 = false;
          this.isShow6 = false;
        } else if (data.label === '其他类') {
          this.tableData = this.tableData1[4].children;
          this.isShow1 = false;
          this.isShow2 = false;
          this.isShow3 = false;
          this.isShow4 = true;
          this.isShow5 = false;
          this.isShow6 = false;
        } else if (data.label === '设备类') {
          this.tableData = this.tableData1[5].children;
          this.isShow1 = false;
          this.isShow2 = false;
          this.isShow3 = false;
          this.isShow4 = false;
          this.isShow5 = true;
          this.isShow6 = false;
        } else if (data.label === '模具类') {
          this.tableData = this.tableData1[6].children;
          this.isShow1 = false;
          this.isShow2 = false;
          this.isShow3 = false;
          this.isShow4 = false;
          this.isShow5 = false;
          this.isShow6 = true;
        }
      },
      submitForm(){
        this.$confirm('确认提交吗？').then(() => {
          this.loading = true;
          if(this.title == '新增原材料'){
           setTimeout(() => {
            this.tableData1[0].children.push(this.form)
            this.$message.success('新增成功');
            this.loading = false
          },2000)
          this.open = false;
          }
        })
      },
      cancel(){
        this.open = false;
        this.index = 0
      },
      handleQuery() {
        this.loading = false;
      },
      resetQuery() {
      },
      handleAdd() {
        this.title = '新增原材料'
        this.open = true;
        this.isEdit = false;
      },
      handleUpdate(row) {
        this.title = '编辑原材料'
        this.open = true;
        this.isEdit = false;
        this.form = row;
        
      },
      handleDelete() { },
      handleExport() { },
      handleSelectionChange(selection) {
        this.ids = selection.map((item) => item.userId);
        this.single = selection.length !== 1;
        this.multiple = !selection.length;
      },
     submitFormReference(){
        this.$confirm('确认提交吗？').then(() => {
          this.loading = true;
          setTimeout(() => {
            this.tableData1[0].children.push(this.formReference)
            this.$message.success('新增成功');
            this.loading = false        
          },1000)
          this.openReference = false;
        })
     },
     cancelReference(){
        this.openReference = false;
        this.formReference = {}
     },
    },
  
  }
  </script>
  